﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  <meta name="description" content=""/>
  <meta name="author" content=""/>
  <title>Rukada - Responsive Bootstrap4  Admin Dashboard Template</title>
  <!--favicon-->
  <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
  <!-- simplebar CSS-->
  <link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet"/>
  <!-- Bootstrap core CSS-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
  <!-- animate CSS-->
  <link href="assets/css/animate.css" rel="stylesheet" type="text/css"/>
  <!-- Icons CSS-->
  <link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
  <!-- Sidebar CSS-->
  <link href="assets/css/sidebar-menu.css" rel="stylesheet"/>
  <!-- Custom Style-->
  <link href="assets/css/app-style.css" rel="stylesheet"/>
  
</head>

<body>

<!-- Start wrapper-->
 <div id="wrapper">
 
   <!--Start sidebar-wrapper-->
   <div id="sidebar-wrapper" data-simplebar="" data-simplebar-auto-hide="true">
     <div class="brand-logo">
      <a href="index.html">
       <img src="assets/images/logo-icon.png" class="logo-icon" alt="logo icon">
       <h5 class="logo-text">Rukada Admin</h5>
     </a>
   </div>
   <ul class="sidebar-menu do-nicescrol">
      <li class="sidebar-header">MAIN NAVIGATION</li>
      <li>
        <a href="index.html" class="waves-effect">
          <i class="zmdi zmdi-view-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="index.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v1</a></li>
          <li><a href="index2.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v2</a></li>
          <li><a href="index3.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v3</a></li>
          <li><a href="index4.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v4</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-layers"></i>
          <span>UI Elements</span> <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
        <li><a href="ui-checkbox-radio.html"><i class="zmdi zmdi-star-outline"></i> Checkboxes & Radios</a></li>
        <li><a href="ui-nav-tabs.html"><i class="zmdi zmdi-star-outline"></i> Nav Tabs</a></li>
        <li><a href="ui-accordions.html"><i class="zmdi zmdi-star-outline"></i> Accordions</a></li>
        <li><a href="ui-modals.html"><i class="zmdi zmdi-star-outline"></i> Modals</a></li>
        <li><a href="ui-typography.html"><i class="zmdi zmdi-star-outline"></i> Typography</a></li>
        <li><a href="ui-list-groups.html"><i class="zmdi zmdi-star-outline"></i> List Groups</a></li>
        <li><a href="ui-bootstrap-elements.html"><i class="zmdi zmdi-star-outline"></i> BS Elements</a></li>
        <li><a href="ui-pagination.html"><i class="zmdi zmdi-star-outline"></i> Pagination</a></li>
        <li><a href="ui-alerts.html"><i class="zmdi zmdi-star-outline"></i> Alerts</a></li>
        <li><a href="ui-progressbars.html"><i class="zmdi zmdi-star-outline"></i> Progress Bars</a></li>
        <li><a href="ui-notification.html"><i class="zmdi zmdi-star-outline"></i> Notifications</a></li>
        <li><a href="ui-sweet-alert.html"><i class="zmdi zmdi-star-outline"></i> Sweet Alerts</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-gamepad"></i> <span>BS Cards</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="cards-image-cards.html"><i class="zmdi zmdi-star-outline"></i> Image Cards</a></li>
          <li><a href="cards-text-cards.html"><i class="zmdi zmdi-star-outline"></i> Text Cards</a></li>
          <li><a href="cards-profile-cards.html"><i class="zmdi zmdi-star-outline"></i> Profile Cards</a></li>
          <li><a href="cards-social-cards.html"><i class="zmdi zmdi-star-outline"></i> Social Cards</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-cloud-done"></i> <span>Buttons</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="buttons-default-button.html"><i class="zmdi zmdi-star-outline"></i> Default Button</a></li>
          <li><a href="buttons-dropdown-buttons.html"><i class="zmdi zmdi-star-outline"></i> Dropdown Buttons</a></li>
          <li><a href="buttons-group-buttons.html"><i class="zmdi zmdi-star-outline"></i> Group Buttons</a></li>
          <li><a href="buttons-icon-buttons.html"><i class="zmdi zmdi-star-outline"></i> Icon Buttons</a></li>
          <li><a href="buttons-outline-buttons.html"><i class="zmdi zmdi-star-outline"></i> Outline Buttons</a></li>
          <li><a href="buttons-social-buttons.html"><i class="zmdi zmdi-star-outline"></i> Social Buttons</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-card-travel"></i>
          <span>Components</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="components-range-slider.html"><i class="zmdi zmdi-star-outline"></i> Range Sliders</a></li>
          <li><a href="components-image-carousel.html"><i class="zmdi zmdi-star-outline"></i> Image Carousels</a></li>
          <li><a href="components-grid-layouts.html"><i class="zmdi zmdi-star-outline"></i> Grid Layouts</a></li>
          <li><a href="components-tree-view-menu.html"><i class="zmdi zmdi-star-outline"></i> Tree View</a></li>
          <li><a href="components-nestable.html"><i class="zmdi zmdi-star-outline"></i> Nesteble</a></li>
          <li><a href="components-switcher-buttons.html"><i class="zmdi zmdi-star-outline"></i> Switcher Buttons</a></li>
          <li><a href="components-pricing-table.html"><i class="zmdi zmdi-star-outline"></i> Pricing Tables</a></li>
          <li><a href="components-vertical-timeline.html"><i class="zmdi zmdi-star-outline"></i> Vertical Timeline</a></li>
          <li><a href="components-horizontal-timeline.html"><i class="zmdi zmdi-star-outline"></i> Horizontal Timeline</a></li>
          <li><a href="components-fancy-lightbox.html"><i class="zmdi zmdi-star-outline"></i> Fancy Lightbox</a></li>          
          <li><a href="components-color-palette.html"><i class="zmdi zmdi-star-outline"></i> Color Palette</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-chart"></i> <span>Charts</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="charts-chartjs.html"><i class="zmdi zmdi-star-outline"></i> Chart JS</a></li>
          <li><a href="charts-morris.html"><i class="zmdi zmdi-star-outline"></i> Morris Charts</a></li>
          <li><a href="charts-sparkline.html"><i class="zmdi zmdi-star-outline"></i> Sparkline Charts</a></li>
          <li><a href="charts-peity.html"><i class="zmdi zmdi-star-outline"></i> Peity Charts</a></li>
          <li><a href="charts-c3-charts.html"><i class="zmdi zmdi-star-outline"></i> C3 Charts</a></li>
          <li><a href="charts-other.html"><i class="zmdi zmdi-star-outline"></i> Other Charts</a></li>
          <li><a href="charts-flot.html"><i class="zmdi zmdi-star-outline"></i> Flot Chart</a></li>
        </ul>
       </li>
      <li>
        <a href="calendar.html" class="waves-effect">
          <i class="zmdi zmdi-calendar-check"></i> <span>Calendar</span>
          <small class="badge float-right badge-info">New</small>
        </a>
      </li>
    
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-email"></i>
          <span>Mailbox</span>
           <small class="badge float-right badge-warning">12</small>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="mail-inbox.html"><i class="zmdi zmdi-star-outline"></i> Inbox</a></li>
          <li><a href="mail-compose.html"><i class="zmdi zmdi-star-outline"></i> Compose</a></li>
          <li><a href="mail-read.html"><i class="zmdi zmdi-star-outline"></i> Read Mail</a></li>
        </ul>
      </li>
      
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-format-list-bulleted"></i> <span>Forms</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="form-inputs.html"><i class="zmdi zmdi-star-outline"></i> Basic Inputs</a></li>
          <li><a href="form-input-group.html"><i class="zmdi zmdi-star-outline"></i> Input Groups</a></li>
          <li><a href="form-layouts.html"><i class="zmdi zmdi-star-outline"></i> Form Layouts</a></li>
          <li><a href="form-advanced.html"><i class="zmdi zmdi-star-outline"></i> Form Advanced</a></li>
          <li><a href="form-uploads.html"><i class="zmdi zmdi-star-outline"></i> Form Uploads</a></li>
          <li><a href="form-validation.html"><i class="zmdi zmdi-star-outline"></i> Form Validation</a></li>
          <li><a href="form-step-wizard.html"><i class="zmdi zmdi-star-outline"></i> Form Wizard</a></li>
          <li><a href="form-text-editor.html"><i class="zmdi zmdi-star-outline"></i> Form Editor</a></li>
        </ul>
      </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-lock"></i> <span>Authentication</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="authentication-signin.html"><i class="zmdi zmdi-star-outline"></i> SignIn 1</a></li>
          <li><a href="authentication-signup.html"><i class="zmdi zmdi-star-outline"></i> SignUp 1</a></li>
          <li><a href="authentication-lock-screen.html"><i class="zmdi zmdi-star-outline"></i> Lock Screen</a></li>
          <li><a href="authentication-reset-password.html"><i class="zmdi zmdi-star-outline"></i> Reset Password 1</a></li>
        </ul>
       </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-invert-colors"></i> <span>UI Icons</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="icons-font-awesome.html"><i class="zmdi zmdi-star-outline"></i> Font Awesome</a></li>
          <li><a href="icons-material-designs.html"><i class="zmdi zmdi-star-outline"></i> Material Design</a></li>
          <li><a href="icons-themify.html"><i class="zmdi zmdi-star-outline"></i> Themify Icons</a></li>
          <li><a href="icons-simple-line-icons.html"><i class="zmdi zmdi-star-outline"></i> Line Icons</a></li>
          <li><a href="icons-flags.html"><i class="zmdi zmdi-star-outline"></i> Flag Icons</a></li>
        </ul>
      </li>
    
       <li>
        <a href="widgets.html" class="waves-effect">
          <i class="zmdi zmdi-widgets"></i> <span>Widgets</span>
          <small class="badge float-right badge-danger">10</small>
        </a>
      </li>
     
     <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-grid"></i> <span>Tables</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="table-simple-tables.html"><i class="zmdi zmdi-star-outline"></i> Simple Tables</a></li>
          <li><a href="table-header-tables.html"><i class="zmdi zmdi-star-outline"></i> Header Tables</a></li>
          <li><a href="table-color-tables.html"><i class="zmdi zmdi-star-outline"></i> Color Tables</a></li>
          <li><a href="table-striped-color-tables.html"><i class="zmdi zmdi-star-outline"></i> Striped Color Tables</a></li>
          <li><a href="table-data-tables.html"><i class="zmdi zmdi-star-outline"></i> Data Tables</a></li>
        </ul>
       </li>
     
     <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-map"></i> <span>Maps</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="maps-google.html"><i class="zmdi zmdi-star-outline"></i> Google Maps</a></li>
          <li><a href="maps-vector.html"><i class="zmdi zmdi-star-outline"></i> Vector Maps</a></li>
        </ul>
       </li>
     
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-collection-folder-image"></i> <span>Sample Pages</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
              <li><a href="pages-invoice.html"><i class="zmdi zmdi-star-outline"></i> Invoice</a></li>
          <li><a href="pages-user-profile.html"><i class="zmdi zmdi-star-outline"></i> User Profile</a></li>
          <li><a href="pages-blank-page.html"><i class="zmdi zmdi-star-outline"></i> Blank Page</a></li>
              <li><a href="pages-coming-soon.html"><i class="zmdi zmdi-star-outline"></i> Coming Soon</a></li>
          <li><a href="pages-403.html"><i class="zmdi zmdi-star-outline"></i> 403 Error</a></li>
          <li><a href="pages-404.html"><i class="zmdi zmdi-star-outline"></i> 404 Error</a></li>
          <li><a href="pages-500.html"><i class="zmdi zmdi-star-outline"></i> 500 Error</a></li>
        </ul>
       </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="fa fa-share"></i> <span>Multilevel</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level One</a></li>
          <li>
            <a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
            <ul class="sidebar-submenu">
              <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Two</a></li>
              <li>
                <a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
                <ul class="sidebar-submenu">
                  <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Three</a></li>
                  <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Three</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-star-outline"></i> Level One</a></li>
        </ul>
      </li>
      <li class="sidebar-header">LABELS</li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-coffee text-danger"></i> <span>Important</span></a></li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-chart-donut text-success"></i> <span>Warning</span></a></li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-share text-info"></i> <span>Information</span></a></li>
    </ul>
   
   </div>
   <!--End sidebar-wrapper-->

<!--Start topbar header-->
<header class="topbar-nav">
 <nav class="navbar navbar-expand fixed-top bg-white">
  <ul class="navbar-nav mr-auto align-items-center">
    <li class="nav-item">
      <a class="nav-link toggle-menu" href="javascript:void();">
       <i class="icon-menu menu-icon"></i>
     </a>
    </li>
    <li class="nav-item">
      <form class="search-bar">
        <input type="text" class="form-control" placeholder="Enter keywords">
         <a href="javascript:void();"><i class="icon-magnifier"></i></a>
      </form>
    </li>
  </ul>
     
  <ul class="navbar-nav align-items-center right-nav-link">
    <li class="nav-item dropdown-lg">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
      <i class="fa fa-envelope-open-o"></i><span class="badge badge-secondary badge-up">12</span></a>
      <div class="dropdown-menu dropdown-menu-right">
        <ul class="list-group list-group-flush">
         <li class="list-group-item d-flex justify-content-between align-items-center">
          You have 12 new messages
          <span class="badge badge-secondary">12</span>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-5.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Jhon Deo</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            <small>Today, 4:10 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-6.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Sara Jen</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            <small>Yesterday, 8:30 AM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-7.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Dannish Josh</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
             <small>5/11/2018, 2:50 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-8.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Katrina Mccoy</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet.</p>
            <small>1/11/2018, 2:50 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item"><a href="javaScript:void();">See All Messages</a></li>
        </ul>
        </div>
    </li>
    <li class="nav-item dropdown-lg">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
    <i class="fa fa-bell-o"></i><span class="badge badge-info badge-up">14</span></a>
      <div class="dropdown-menu dropdown-menu-right">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between align-items-center">
          You have 14 Notifications
          <span class="badge badge-info">14</span>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-accounts fa-2x mr-3 text-primary"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Registered Users</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-coffee fa-2x mr-3 text-success"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Received Orders</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-notifications-active fa-2x mr-3 text-secondary"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Updates</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item"><a href="javaScript:void();">See All Notifications</a></li>
        </ul>
      </div>
    </li>
    <li class="nav-item language">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="#"><i class="flag-icon flag-icon-gb"></i></a>
      <ul class="dropdown-menu dropdown-menu-right">
          <li class="dropdown-item"> <i class="flag-icon flag-icon-gb mr-2"></i> English</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-fr mr-2"></i> French</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-cn mr-2"></i> Chinese</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-de mr-2"></i> German</li>
        </ul>
    </li>
    <li class="nav-item">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown" href="#">
        <span class="user-profile"><img src="assets/images/avatars/avatar-13.png" class="img-circle" alt="user avatar"></span>
      </a>
      <ul class="dropdown-menu dropdown-menu-right">
       <li class="dropdown-item user-details">
        <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-13.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-2 user-title">Katrina Mccoy</h6>
            <p class="user-subtitle">mccoy@example.com</p>
            </div>
           </div>
          </a>
        </li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-envelope mr-2"></i> Inbox</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-wallet mr-2"></i> Account</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-settings mr-2"></i> Setting</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-power mr-2"></i> Logout</li>
      </ul>
    </li>
  </ul>
</nav>
</header>
<!--End topbar header-->

<div class="clearfix"></div>
	
  <div class="content-wrapper">
    <div class="container-fluid">
     <!-- Breadcrumb-->
     <div class="row pt-2 pb-2">
        <div class="col-sm-9">
		    <h4 class="page-title">Line Icons</h4>
		    <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javaScript:void();">Rukada</a></li>
            <li class="breadcrumb-item"><a href="javaScript:void();">Icons</a></li>
            <li class="breadcrumb-item active" aria-current="page">Line Icons</li>
         </ol>
	   </div>
	   <div class="col-sm-3">
       <div class="btn-group float-sm-right">
        <button type="button" class="btn btn-outline-primary waves-effect waves-light"><i class="fa fa-cog mr-1"></i> Setting</button>
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split waves-effect waves-light" data-toggle="dropdown">
        <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a href="javaScript:void();" class="dropdown-item">Action</a>
          <a href="javaScript:void();" class="dropdown-item">Another action</a>
          <a href="javaScript:void();" class="dropdown-item">Something else here</a>
          <div class="dropdown-divider"></div>
          <a href="javaScript:void();" class="dropdown-item">Separated link</a>
        </div>
      </div>
     </div>
     </div>
    <!-- End Breadcrumb-->
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-body">
           <div class="row">
                     
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-user icons"></i><span class="name">user</span> <code class="code-preview" style="display: none;">.icon-user</code></a>
                                </div>
                            </div>
                            
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-people icons"></i><span class="name">people</span> <code class="code-preview" style="display: none;">.icon-people</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-user-female icons"></i><span class="name">user-female</span> <code class="code-preview" style="display: none;">.icon-user-female</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-user-follow icons"></i><span class="name">user-follow</span> <code class="code-preview" style="display: none;">.icon-user-follow</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-user-following icons"></i><span class="name">user-following</span> <code class="code-preview" style="display: none;">.icon-user-following</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-user-unfollow icons"></i><span class="name">user-unfollow</span> <code class="code-preview" style="display: none;">.icon-user-unfollow</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-login icons"></i><span class="name">login</span> <code class="code-preview" style="display: none;">.icon-login</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-logout icons"></i><span class="name">logout</span> <code class="code-preview" style="display: none;">.icon-logout</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-emotsmile icons"></i><span class="name">emotsmile</span> <code class="code-preview" style="display: none;">.icon-emotsmile</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-phone icons"></i><span class="name">phone</span> <code class="code-preview" style="display: none;">.icon-phone</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-call-end icons"></i><span class="name">call-end</span> <code class="code-preview" style="display: none;">.icon-call-end</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-call-in icons"></i><span class="name">call-in</span> <code class="code-preview" style="display: none;">.icon-call-in</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-call-out icons"></i><span class="name">call-out</span> <code class="code-preview" style="display: none;">.icon-call-out</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-map icons"></i><span class="name">map</span> <code class="code-preview" style="display: none;">.icon-map</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-location-pin icons"></i><span class="name">location-pin</span> <code class="code-preview" style="display: none;">.icon-location-pin</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-direction icons"></i><span class="name">direction</span> <code class="code-preview" style="display: none;">.icon-direction</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-directions icons"></i><span class="name">directions</span> <code class="code-preview" style="display: none;">.icon-directions</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-compass icons"></i><span class="name">compass</span> <code class="code-preview" style="display: none;">.icon-compass</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-layers icons"></i><span class="name">layers</span> <code class="code-preview" style="display: none;">.icon-layers</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-menu icons"></i><span class="name">menu</span> <code class="code-preview" style="display: none;">.icon-menu</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-list icons"></i><span class="name">list</span> <code class="code-preview" style="display: none;">.icon-list</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-options-vertical icons"></i><span class="name">options-vertical</span> <code class="code-preview" style="display: none;">.icon-options-vertical</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-options icons"></i><span class="name">options</span> <code class="code-preview" style="display: none;">.icon-options</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-arrow-down icons"></i><span class="name">arrow-down</span> <code class="code-preview" style="display: none;">.icon-arrow-down</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-arrow-left icons"></i><span class="name">arrow-left</span> <code class="code-preview" style="display: none;">.icon-arrow-left</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-arrow-right icons"></i><span class="name">arrow-right</span> <code class="code-preview" style="display: none;">.icon-arrow-right</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-arrow-up icons"></i><span class="name">arrow-up</span> <code class="code-preview" style="display: none;">.icon-arrow-up</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-arrow-up-circle icons"></i><span class="name">arrow-up-circle</span> <code class="code-preview" style="display: none;">.icon-arrow-up-circle</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-arrow-left-circle icons"></i><span class="name">arrow-left-circle</span> <code class="code-preview" style="display: none;">.icon-arrow-left-circle</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-arrow-right-circle icons"></i><span class="name">arrow-right-circle</span> <code class="code-preview" style="display: none;">.icon-arrow-right-circle</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-arrow-down-circle icons"></i><span class="name">arrow-down-circle</span> <code class="code-preview" style="display: none;">.icon-arrow-down-circle</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-check icons"></i><span class="name">check</span> <code class="code-preview" style="display: none;">.icon-check</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-clock icons"></i><span class="name">clock</span> <code class="code-preview" style="display: none;">.icon-clock</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-plus icons"></i><span class="name">plus</span> <code class="code-preview" style="display: none;">.icon-plus</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-minus icons"></i><span class="name">minus</span> <code class="code-preview" style="display: none;">.icon-minus</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-close icons"></i><span class="name">close</span> <code class="code-preview" style="display: none;">.icon-close</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-event icons"></i><span class="name">event</span> <code class="code-preview" style="display: none;">.icon-event</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-exclamation icons"></i><span class="name">exclamation</span> <code class="code-preview" style="display: none;">.icon-exclamation</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-organization icons"></i><span class="name">organization</span> <code class="code-preview" style="display: none;">.icon-organization</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-trophy icons"></i><span class="name">trophy</span> <code class="code-preview" style="display: none;">.icon-trophy</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-screen-smartphone icons"></i><span class="name">screen-smartphone</span> <code class="code-preview" style="display: none;">.icon-screen-smartphone</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-screen-desktop icons"></i><span class="name">screen-desktop</span> <code class="code-preview" style="display: none;">.icon-screen-desktop</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-plane icons"></i><span class="name">plane</span> <code class="code-preview" style="display: none;">.icon-plane</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-notebook icons"></i><span class="name">notebook</span> <code class="code-preview" style="display: none;">.icon-notebook</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-mustache icons"></i><span class="name">mustache</span> <code class="code-preview" style="display: none;">.icon-mustache</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-mouse icons"></i><span class="name">mouse</span> <code class="code-preview" style="display: none;">.icon-mouse</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-magnet icons"></i><span class="name">magnet</span> <code class="code-preview" style="display: none;">.icon-magnet</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-energy icons"></i><span class="name">energy</span> <code class="code-preview" style="display: none;">.icon-energy</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-disc icons"></i><span class="name">disc</span> <code class="code-preview" style="display: none;">.icon-disc</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-cursor icons"></i><span class="name">cursor</span> <code class="code-preview" style="display: none;">.icon-cursor</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-cursor-move icons"></i><span class="name">cursor-move</span> <code class="code-preview" style="display: none;">.icon-cursor-move</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-crop icons"></i><span class="name">crop</span> <code class="code-preview" style="display: none;">.icon-crop</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-chemistry icons"></i><span class="name">chemistry</span> <code class="code-preview" style="display: none;">.icon-chemistry</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-speedometer icons"></i><span class="name">speedometer</span> <code class="code-preview" style="display: none;">.icon-speedometer</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-shield icons"></i><span class="name">shield</span> <code class="code-preview" style="display: none;">.icon-shield</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-screen-tablet icons"></i><span class="name">screen-tablet</span> <code class="code-preview" style="display: none;">.icon-screen-tablet</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-magic-wand icons"></i><span class="name">magic-wand</span> <code class="code-preview" style="display: none;">.icon-magic-wand</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-hourglass icons"></i><span class="name">hourglass</span> <code class="code-preview" style="display: none;">.icon-hourglass</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-graduation icons"></i><span class="name">graduation</span> <code class="code-preview" style="display: none;">.icon-graduation</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-ghost icons"></i><span class="name">ghost</span> <code class="code-preview" style="display: none;">.icon-ghost</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-game-controller icons"></i><span class="name">game-controller</span> <code class="code-preview" style="display: none;">.icon-game-controller</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-fire icons"></i><span class="name">fire</span> <code class="code-preview" style="display: none;">.icon-fire</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-eyeglass icons"></i><span class="name">eyeglass</span> <code class="code-preview" style="display: none;">.icon-eyeglass</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-envelope-open icons"></i><span class="name">envelope-open</span> <code class="code-preview" style="display: none;">.icon-envelope-open</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-envelope-letter icons"></i><span class="name">envelope-letter</span> <code class="code-preview" style="display: none;">.icon-envelope-letter</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-bell icons"></i><span class="name">bell</span> <code class="code-preview" style="display: none;">.icon-bell</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-badge icons"></i><span class="name">badge</span> <code class="code-preview" style="display: none;">.icon-badge</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-anchor icons"></i><span class="name">anchor</span> <code class="code-preview" style="display: none;">.icon-anchor</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-wallet icons"></i><span class="name">wallet</span> <code class="code-preview" style="display: none;">.icon-wallet</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-vector icons"></i><span class="name">vector</span> <code class="code-preview" style="display: none;">.icon-vector</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-speech icons"></i><span class="name">speech</span> <code class="code-preview" style="display: none;">.icon-speech</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-puzzle icons"></i><span class="name">puzzle</span> <code class="code-preview" style="display: none;">.icon-puzzle</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-printer icons"></i><span class="name">printer</span> <code class="code-preview" style="display: none;">.icon-printer</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-present icons"></i><span class="name">present</span> <code class="code-preview" style="display: none;">.icon-present</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-playlist icons"></i><span class="name">playlist</span> <code class="code-preview" style="display: none;">.icon-playlist</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-pin icons"></i><span class="name">pin</span> <code class="code-preview" style="display: none;">.icon-pin</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-picture icons"></i><span class="name">picture</span> <code class="code-preview" style="display: none;">.icon-picture</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-handbag icons"></i><span class="name">handbag</span> <code class="code-preview" style="display: none;">.icon-handbag</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-globe-alt icons"></i><span class="name">globe-alt</span> <code class="code-preview" style="display: none;">.icon-globe-alt</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-globe icons"></i><span class="name">globe</span> <code class="code-preview" style="display: none;">.icon-globe</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-folder-alt icons"></i><span class="name">folder-alt</span> <code class="code-preview" style="display: none;">.icon-folder-alt</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-folder icons"></i><span class="name">folder</span> <code class="code-preview" style="display: none;">.icon-folder</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-film icons"></i><span class="name">film</span> <code class="code-preview" style="display: none;">.icon-film</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-feed icons"></i><span class="name">feed</span> <code class="code-preview" style="display: none;">.icon-feed</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-drop icons"></i><span class="name">drop</span> <code class="code-preview" style="display: none;">.icon-drop</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-drawer icons"></i><span class="name">drawer</span> <code class="code-preview" style="display: none;">.icon-drawer</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-docs icons"></i><span class="name">docs</span> <code class="code-preview" style="display: none;">.icon-docs</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-doc icons"></i><span class="name">doc</span> <code class="code-preview" style="display: none;">.icon-doc</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-diamond icons"></i><span class="name">diamond</span> <code class="code-preview" style="display: none;">.icon-diamond</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-cup icons"></i><span class="name">cup</span> <code class="code-preview" style="display: none;">.icon-cup</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-calculator icons"></i><span class="name">calculator</span> <code class="code-preview" style="display: none;">.icon-calculator</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-bubbles icons"></i><span class="name">bubbles</span> <code class="code-preview" style="display: none;">.icon-bubbles</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-briefcase icons"></i><span class="name">briefcase</span> <code class="code-preview" style="display: none;">.icon-briefcase</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-book-open icons"></i><span class="name">book-open</span> <code class="code-preview" style="display: none;">.icon-book-open</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-basket-loaded icons"></i><span class="name">basket-loaded</span> <code class="code-preview" style="display: none;">.icon-basket-loaded</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-basket icons"></i><span class="name">basket</span> <code class="code-preview" style="display: none;">.icon-basket</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-bag icons"></i><span class="name">bag</span> <code class="code-preview" style="display: none;">.icon-bag</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-action-undo icons"></i><span class="name">action-undo</span> <code class="code-preview" style="display: none;">.icon-action-undo</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-action-redo icons"></i><span class="name">action-redo</span> <code class="code-preview" style="display: none;">.icon-action-redo</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-wrench icons"></i><span class="name">wrench</span> <code class="code-preview" style="display: none;">.icon-wrench</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-umbrella icons"></i><span class="name">umbrella</span> <code class="code-preview" style="display: none;">.icon-umbrella</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-trash icons"></i><span class="name">trash</span> <code class="code-preview" style="display: none;">.icon-trash</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-tag icons"></i><span class="name">tag</span> <code class="code-preview" style="display: none;">.icon-tag</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-support icons"></i><span class="name">support</span> <code class="code-preview" style="display: none;">.icon-support</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-frame icons"></i><span class="name">frame</span> <code class="code-preview" style="display: none;">.icon-frame</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-size-fullscreen icons"></i><span class="name">size-fullscreen</span> <code class="code-preview" style="display: none;">.icon-size-fullscreen</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-size-actual icons"></i><span class="name">size-actual</span> <code class="code-preview" style="display: none;">.icon-size-actual</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-shuffle icons"></i><span class="name">shuffle</span> <code class="code-preview" style="display: none;">.icon-shuffle</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-share-alt icons"></i><span class="name">share-alt</span> <code class="code-preview" style="display: none;">.icon-share-alt</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-share icons"></i><span class="name">share</span> <code class="code-preview" style="display: none;">.icon-share</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-rocket icons"></i><span class="name">rocket</span> <code class="code-preview" style="display: none;">.icon-rocket</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-question icons"></i><span class="name">question</span> <code class="code-preview" style="display: none;">.icon-question</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-pie-chart icons"></i><span class="name">pie-chart</span> <code class="code-preview" style="display: none;">.icon-pie-chart</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-pencil icons"></i><span class="name">pencil</span> <code class="code-preview" style="display: none;">.icon-pencil</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-note icons"></i><span class="name">note</span> <code class="code-preview" style="display: none;">.icon-note</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-loop icons"></i><span class="name">loop</span> <code class="code-preview" style="display: none;">.icon-loop</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-home icons"></i><span class="name">home</span> <code class="code-preview" style="display: none;">.icon-home</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-grid icons"></i><span class="name">grid</span> <code class="code-preview" style="display: none;">.icon-grid</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-graph icons"></i><span class="name">graph</span> <code class="code-preview" style="display: none;">.icon-graph</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-microphone icons"></i><span class="name">microphone</span> <code class="code-preview" style="display: none;">.icon-microphone</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-music-tone-alt icons"></i><span class="name">music-tone-alt</span> <code class="code-preview" style="display: none;">.icon-music-tone-alt</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-music-tone icons"></i><span class="name">music-tone</span> <code class="code-preview" style="display: none;">.icon-music-tone</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-earphones-alt icons"></i><span class="name">earphones-alt</span> <code class="code-preview" style="display: none;">.icon-earphones-alt</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-earphones icons"></i><span class="name">earphones</span> <code class="code-preview" style="display: none;">.icon-earphones</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-equalizer icons"></i><span class="name">equalizer</span> <code class="code-preview" style="display: none;">.icon-equalizer</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-like icons"></i><span class="name">like</span> <code class="code-preview" style="display: none;">.icon-like</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-dislike icons"></i><span class="name">dislike</span> <code class="code-preview" style="display: none;">.icon-dislike</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-control-start icons"></i><span class="name">control-start</span> <code class="code-preview" style="display: none;">.icon-control-start</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-control-rewind icons"></i><span class="name">control-rewind</span> <code class="code-preview" style="display: none;">.icon-control-rewind</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-control-play icons"></i><span class="name">control-play</span> <code class="code-preview" style="display: none;">.icon-control-play</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-control-pause icons"></i><span class="name">control-pause</span> <code class="code-preview" style="display: none;">.icon-control-pause</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-control-forward icons"></i><span class="name">control-forward</span> <code class="code-preview" style="display: none;">.icon-control-forward</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-control-end icons"></i><span class="name">control-end</span> <code class="code-preview" style="display: none;">.icon-control-end</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-volume-1 icons"></i><span class="name">volume-1</span> <code class="code-preview" style="display: none;">.icon-volume-1</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-volume-2 icons"></i><span class="name">volume-2</span> <code class="code-preview" style="display: none;">.icon-volume-2</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-volume-off icons"></i><span class="name">volume-off</span> <code class="code-preview" style="display: none;">.icon-volume-off</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-calendar icons"></i><span class="name">calendar</span> <code class="code-preview" style="display: none;">.icon-calendar</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-bulb icons"></i><span class="name">bulb</span> <code class="code-preview" style="display: none;">.icon-bulb</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-chart icons"></i><span class="name">chart</span> <code class="code-preview" style="display: none;">.icon-chart</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-ban icons"></i><span class="name">ban</span> <code class="code-preview" style="display: none;">.icon-ban</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-bubble icons"></i><span class="name">bubble</span> <code class="code-preview" style="display: none;">.icon-bubble</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-camrecorder icons"></i><span class="name">camrecorder</span> <code class="code-preview" style="display: none;">.icon-camrecorder</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-camera icons"></i><span class="name">camera</span> <code class="code-preview" style="display: none;">.icon-camera</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-cloud-download icons"></i><span class="name">cloud-download</span> <code class="code-preview" style="display: none;">.icon-cloud-download</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-cloud-upload icons"></i><span class="name">cloud-upload</span> <code class="code-preview" style="display: none;">.icon-cloud-upload</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-envelope icons"></i><span class="name">envelope</span> <code class="code-preview" style="display: none;">.icon-envelope</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-eye icons"></i><span class="name">eye</span> <code class="code-preview" style="display: none;">.icon-eye</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-flag icons"></i><span class="name">flag</span> <code class="code-preview" style="display: none;">.icon-flag</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-heart icons"></i><span class="name">heart</span> <code class="code-preview" style="display: none;">.icon-heart</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-info icons"></i><span class="name">info</span> <code class="code-preview" style="display: none;">.icon-info</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-key icons"></i><span class="name">key</span> <code class="code-preview" style="display: none;">.icon-key</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-link icons"></i><span class="name">link</span> <code class="code-preview" style="display: none;">.icon-link</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-lock icons"></i><span class="name">lock</span> <code class="code-preview" style="display: none;">.icon-lock</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-lock-open icons"></i><span class="name">lock-open</span> <code class="code-preview" style="display: none;">.icon-lock-open</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-magnifier icons"></i><span class="name">magnifier</span> <code class="code-preview" style="display: none;">.icon-magnifier</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-magnifier-add icons"></i><span class="name">magnifier-add</span> <code class="code-preview" style="display: none;">.icon-magnifier-add</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-magnifier-remove icons"></i><span class="name">magnifier-remove</span> <code class="code-preview" style="display: none;">.icon-magnifier-remove</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-paper-clip icons"></i><span class="name">paper-clip</span> <code class="code-preview" style="display: none;">.icon-paper-clip</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-paper-plane icons"></i><span class="name">paper-plane</span> <code class="code-preview" style="display: none;">.icon-paper-plane</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-power icons"></i><span class="name">power</span> <code class="code-preview" style="display: none;">.icon-power</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-refresh icons"></i><span class="name">refresh</span> <code class="code-preview" style="display: none;">.icon-refresh</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-reload icons"></i><span class="name">reload</span> <code class="code-preview" style="display: none;">.icon-reload</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-settings icons"></i><span class="name">settings</span> <code class="code-preview" style="display: none;">.icon-settings</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-star icons"></i><span class="name">star</span> <code class="code-preview" style="display: none;">.icon-star</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-symbol-female icons"></i><span class="name">symbol-female</span> <code class="code-preview" style="display: none;">.icon-symbol-female</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-symbol-male icons"></i><span class="name">symbol-male</span> <code class="code-preview" style="display: none;">.icon-symbol-male</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-target icons"></i><span class="name">target</span> <code class="code-preview" style="display: none;">.icon-target</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-credit-card icons"></i><span class="name">credit-card</span> <code class="code-preview" style="display: none;">.icon-credit-card</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-paypal icons"></i><span class="name">paypal</span> <code class="code-preview" style="display: none;">.icon-paypal</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-tumblr icons"></i><span class="name">social-tumblr</span> <code class="code-preview" style="display: none;">.icon-social-tumblr</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-twitter icons"></i><span class="name">social-twitter</span> <code class="code-preview" style="display: none;">.icon-social-twitter</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-facebook icons"></i><span class="name">social-facebook</span> <code class="code-preview" style="display: none;">.icon-social-facebook</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-instagram icons"></i><span class="name">social-instagram</span> <code class="code-preview" style="display: none;">.icon-social-instagram</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-linkedin icons"></i><span class="name">social-linkedin</span> <code class="code-preview" style="display: none;">.icon-social-linkedin</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-pinterest icons"></i><span class="name">social-pinterest</span> <code class="code-preview" style="display: none;">.icon-social-pinterest</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-github icons"></i><span class="name">social-github</span> <code class="code-preview" style="display: none;">.icon-social-github</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-google icons"></i><span class="name">social-google</span> <code class="code-preview" style="display: none;">.icon-social-google</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-reddit icons"></i><span class="name">social-reddit</span> <code class="code-preview" style="display: none;">.icon-social-reddit</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-skype icons"></i><span class="name">social-skype</span> <code class="code-preview" style="display: none;">.icon-social-skype</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-dribbble icons"></i><span class="name">social-dribbble</span> <code class="code-preview" style="display: none;">.icon-social-dribbble</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-behance icons"></i><span class="name">social-behance</span> <code class="code-preview" style="display: none;">.icon-social-behance</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-foursqare icons"></i><span class="name">social-foursqare</span> <code class="code-preview" style="display: none;">.icon-social-foursqare</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-soundcloud icons"></i><span class="name">social-soundcloud</span> <code class="code-preview" style="display: none;">.icon-social-soundcloud</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-spotify icons"></i><span class="name">social-spotify</span> <code class="code-preview" style="display: none;">.icon-social-spotify</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-stumbleupon icons"></i><span class="name">social-stumbleupon</span> <code class="code-preview" style="display: none;">.icon-social-stumbleupon</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-youtube icons"></i><span class="name">social-youtube</span> <code class="code-preview" style="display: none;">.icon-social-youtube</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-dropbox icons"></i><span class="name">social-dropbox</span> <code class="code-preview" style="display: none;">.icon-social-dropbox</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-vkontakte icons"></i><span class="name">social-vkontakte</span> <code class="code-preview" style="display: none;">.icon-social-vkontakte</code></a>
                                </div>
                            </div>
                            <div class="icon-preview-box col-lg-6 col-xl-4">
                                <div class="preview">
                                    <a class="show-code" href="javascript:void();" title="click to show css class name"><i class="icon-social-steam icons"></i><span class="name">social-steam</span> <code class="code-preview" style="display: none;">.icon-social-steam</code></a>
                                </div>
                            </div>
                          </div>
          </div>
      </div>
        </div>
      </div><!--End Row-->

    </div>
    <!-- End container-fluid-->
    
   </div><!--End content-wrapper-->
   <!--Start Back To Top Button-->
    <a href="javaScript:void();" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
    <!--End Back To Top Button-->
	
	<!--Start footer-->
	<footer class="footer">
      <div class="container">
        <div class="text-center">
          Copyright © 2018 <a href="http://www.17sucai.com/">Rukada</a> Admin
        </div>
      </div>
    </footer>
	<!--End footer-->
   
  </div><!--End wrapper-->


  <!-- Bootstrap core JavaScript-->
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
	
	<!-- simplebar js -->
	<script src="assets/plugins/simplebar/js/simplebar.js"></script>
  <!-- waves effect js -->
  <script src="assets/js/waves.js"></script>
	<!-- sidebar-menu js -->
	<script src="assets/js/sidebar-menu.js"></script>
  <!-- Custom scripts -->
  <script src="assets/js/app-script.js"></script>
	
</body>
</html>
